<html>
<head>

    <title>Goal98.com -- 草根足球</title>
    <g:javascript library="prototype"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=zh"></script>
    <script type="text/javascript">

        var infowindow = new google.maps.InfoWindow();

        var map;

        var fieldMarkers = new Array();

        function initialize() {

            var latlng = new google.maps.LatLng(31.19007, 121.595789);

            var myOptions = {
                //zoom: 12,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                navigationControl: true,
                mapTypeControl: false,
                scaleControl: true
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            google.maps.event.addListener(map, 'idle', function() {
                loadFields();
            });

            /*google.maps.event.addListener(map, 'zoom_changed', function(){
             loadFields();
             });*/

            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                    map.setCenter(latlng);
                }, function() {
                    alert('获取位置失败。');
                });
            } else if (google.gears) {

                var geo = google.gears.factory.create('beta.geolocation');
                geo.getCurrentPosition(function(position) {
                    latlng = new google.maps.LatLng(position.latitude, position.longitude);
                    map.setCenter(latlng);
                }, function() {
                    alert('获取位置失败。');
                });

            } else {
                alert('获取位置失败。');
            }

            map.setZoom(12);

            //loadFields();

        }

        function loadFields() {
            var url = '${createLinkTo(dir:'')}/field/listJSON';
            new Ajax.Request(url, {
                method: 'get',
                evalJSON: true,
                parameters:{
                    neLat: map.getBounds().getNorthEast().lat(),
                    neLng: map.getBounds().getNorthEast().lng(),
                    swLat: map.getBounds().getSouthWest().lat(),
                    swLng: map.getBounds().getSouthWest().lng(),
                },
                onSuccess: function(transport) {

                    clearMarkers();

                    var result = transport.responseJSON;
                    var fieldList = result.fieldInstanceList;
                    if (fieldList) {
                        for (i = 0; i < fieldList.length; i++) {
                            var field = fieldList[i];
                            var position = new google.maps.LatLng(field.latitude, field.longitude);
                            var marker = new google.maps.Marker({
                                position: position,
                                title:field.name,
                                map:map
                            });
                            fieldMarkers.push(marker);

                            google.maps.event.addListener(marker, 'click', openInfoWindow.bind({marker:marker, content: field.name}));
                        }
                    }


                },
                onFailure: function(transport) {
                    alert(transport.responseText);
                }
            });
        }

        function openInfoWindow() {

            infowindow.setContent(this.content);
            infowindow.open(map, this.marker);
        }

        function clearMarkers(){

            for (i = 0; i < fieldMarkers.length; i++) {
                var marker = fieldMarkers[i];
                marker.setVisible(false);
            }
            fieldMarkers.clear();
        }



    </script>

    <link rel="stylesheet" href="${resource(dir: 'css', file: 'goal98.css')}"/>

    <meta name="description" content="${message(code: 'site.desc', default: 'Gola98.com helps amateur soccer/football players to find place and teams around their neighborhoods.')}">

</head>
<body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:97%"></div>
</body>

<g:render template="/shared/ICP"/>
<g:render template="/shared/googleAnalytics"/>
</html>